<template>
	<view>
		<view class="status">
			<view class="title">
				退款失败
			</view>
			<view class="tip">
				备注：未上传图片
			</view>
		</view>
		<view class="goods">
			<view class="img">
				<image class="img"
					src="https://img.js.design/assets/img/668c9ee084a543139ecb06cb.jpg#4daecb55af26b59c4ba5893a9ca94283"
					mode=""></image>
			</view>
			<view class="info">
				<view class="tinfo">
					<view class="t">
						商品名称
					</view>
					<view class="n">
						数量：50瓶
					</view>
				</view>
				<view class="p">
					<text class="u">¥</text>
					<text class="pp">99</text>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="item fcs" v-for="(item, index) in infos" :key="index">
				<view class="l">
					{{ item.label }}
				</view>
				<view class="r">
					{{ item.value }}
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="bc-btn-l fcc">
				重新提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(135.88deg, #F1714E 0%, #E93E30 100%);',
					color: '#FFF'
				},
				infos: [
					{
						label: '订单号：',
						value: '78978978987'
					},
					{
						label: '订单金额：',
						value: '￥99'
					},
					{
						label: '订单状态：',
						value: '待配送'
					},
					{
						label: '订单时间：',
						value: '2024-05-15 12:00:00'
					},
					{
						label: '支付时间：',
						value: '2024-05-15 12:00:00'
					},
					{
						label: '开始配送日期：',
						value: '2024-05-15'
					},
					{
						label: '最近配送日期：',
						value: '2024-05-15'
					},
					{
						label: '配送时间：',
						value: '上午'
					},
					{
						label: '待配送数量：',
						value: '100'
					}
				]
			};
		},
		methods: {
			toRefund() {
				uni.navigateTo({
					url: '/pages/refund/refund'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status {
		width: 100%;
		height: 215rpx;
		background-image: url();
		.title {
			font-size: 46rpx;
			font-weight: 700;
			color: #FFFFFF;
			padding-top: 50rpx;
			padding-left: 26rpx;
		}
		.tip {
			margin-top: 16rpx;
			padding-left: 26rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.btn {
		position: fixed;
		bottom: 38rpx;
		width: 100%;
		left: 0;
		.bc-btn-l {
			color: #FFF;
			width: 676rpx;
			height: 88rpx;
			margin: 0 auto;
			background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
		}
	}
	.info {
		margin-top: 21.5rpx;
		padding: 31rpx 35rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		.item {
			margin-bottom: 31rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 500;
		}
		.item:last-child {
			margin-bottom: 0;
		}
	}
	.goods {
		display: flex;
		align-items: center;
		margin-top: 21.5rpx;
		padding: 31rpx 35rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		.info {
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			// .pp {
			// 	color: #E93E30;
			// 	font-size: 30rpx;
			// 	font-weight: 500;
			// }

			// .u {
			// 	color: #E93E30;
			// 	font-size: 24rpx;
			// 	font-weight: 500;
			// }

			.n {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.t {
				font-size: 26rpx;
				font-weight: 400;
				color: #1E1E1E;
			}
		}

		.img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
	}
</style>
<style>
	page {
		/* padding: 20rpx;
		box-sizing: border-box; */
		background-color: #F5F6F8;
	}
</style>